<template>
  <div class="layout">
    <div class="flex-two">
      <div class="flex-item" @click="modelNavigateTo(props.res.data.list[0])">
        <image
          :style="{ height: height + 'px', width: '100%' }"
          mode="scaleToFill"
          :src="props.res.data.list[0].img"
          alt
        >
        </image>
      </div>
      <div class="flex-item" @click="modelNavigateTo(props.res.data.list[1])">
        <image
          :style="{ height: height + 'px', width: '100%' }"
          mode="scaleToFill"
          :src="props.res.data.list[1].img"
          alt
        >
        </image>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { px2rpx } from './px2rpx'
import { modelNavigateTo } from './tpl-v3'
const props = defineProps(['res'])
const height = ref(uni.getSystemInfoSync().screenWidth * 0.33)
</script>
<style lang="scss" scoped>
img,
image {
  display: block !important;
}

.flex-two {
  width: 100%;
  display: flex;
  overflow: hidden;
}

.flex-item {
  width: 50%;

  > img {
    display: block;
    max-width: 100%;
    height: 100%;
  }
}
</style>
